<template>
  <div class="layout_box">
    <el-container class="all_box">
      <!-- 左边菜单 -->
      <el-aside width="200" >
        <LeftMenu></LeftMenu>
      </el-aside>
      <!-- 右边内容 -->
      <el-container class="right">
        <el-header style="--el-header-padding: 0 10px 0 5px;">
          <HeaderTitle />
        </el-header>
        <el-main>
          <Home v-if="route.path=='/home'"></Home>
          <RouterView v-else />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import { useRoute } from "vue-router"
import LeftMenu from "@/components/LeftMenu.vue";
import HeaderTitle from '@/components/HeaderTitle.vue';
import Home from '@/views/home/Index.vue';

const route = useRoute();

</script>

<style lang="less" scoped>
.layout_box,
.el-container {
  width: 100%;
  height: 100%;

  .el-header {
    background-color: #000000;

  }
}
// .all_box{
//   display: flex;
// }
// .right{
//   flex: 1;
// }
</style>